<template>
  <div class="form-wrapper ps-container">
    <div class="ps-avatar">
      <img :src="user.profilePicture || avatar" alt="" width="150" height="150">
      <el-button type="success" plain round @click="modifyAvatar">修改头像</el-button>
    </div>
    <!-- <div class="material-textfield green ps-width" :class="{'validate-err': errors.has('用户名')}">
      <input type="text" required v-model="user.userName" v-validate="'required'" name="用户名"/>
      <label data-content="用户名">用户名</label>
    </div> -->
    <div class="material-textfield green ps-width">
       <input type="text" required v-model="user.userName" disabled/>
       <label data-content="用户名(不可修改)"></label>
    </div>
    <div class="material-textfield green ps-width" :class="{'validate-err': errors.has('昵称')}">
       <input type="text" required v-model="user.nickName" v-validate="'required|max:20'" name="昵称"/>
       <label data-content="昵称"></label>
    </div>
    <div class="material-textfield green ps-width">
       <input type="text" required v-model="user.phone" disabled style="cursor: not-allowed;"/>
       <label data-content="手机号" ></label>
    </div>
    <div class="material-textfield green ps-width" :class="{'validate-err': errors.has('邮箱')}">
       <input type="text" required v-model="user.email"  v-validate="'email'" name="邮箱"/>
       <label data-content="邮箱"></label>
    </div>
    <div class="ps-confirm">
      <el-button type="success width-200" round @click="updataUser()">提交</el-button>
    </div>
    <set-avatar ref="set" :img-url="avatar" @upload-success="setNewImg"></set-avatar>
  </div>
</template>

<script>
import axios from 'axios'

import SetAvatar from './server/SetAvatar'
  export default {
    components: {
      SetAvatar
    },
    title: '个人中心',
    name: 'person-setting',
    data () {
      return {
        avatar: 'static/morentouxiang.png',
        user: {
          profilePicture: null,
          userName: this.$store.state.user.user.user.username,
          nickName:'',
          phone: '',
          email:'',
          userId: ''
        }
      }
    },
    // mounted () {
    //   console.log('1111111111111111111111111111111111');
    //   this.getuserdata()
    // },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.getuserdata()
      })
    },
    methods: {
      setNewImg (url) {
        this.user.profilePicture = url
        this.upAvatar(true)
      },
      modifyAvatar () {
        this.$refs.set.toggleShow()
      },
      getuserdata () {
        // setTimeout(() => {
        let user = this.$store.state.user.user
        this.user.profilePicture = (user.userDetails ? user.userDetails.profilePicture : null) ? user.userDetails.profilePicture : null
        // this.user.userName = user.userDetails.userName
        this.user.nickName =  user.userDetails ? user.userDetails.nickName : null
        this.user.phone = user.userDetails ? user.userDetails.phone : null
        this.user.email = user.userDetails ? user.userDetails.email : null
        this.user.userId = user.userDetails ? user.userDetails.userId : null
        // }, 200)
      },
      updataUser (noVali) {
        this.$validator.validate().then(result => {
          if (result || noVali) {
            axios.post('/mscs/user/updateUserDetails', this.user).then((res) => {
              if (res.data.code === 1) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$store.commit('modifyUser', this.user)
              } else {
                this.$codeError(res)
              }
            }).catch((error) => {
              this.$catchError(error)
            })
          } else {
            this.$message({
              showClose: true,
              message: this.$connErmsg(this.$validator.errors.items),
              type: 'error'
            })
          }
        })
      },
      upAvatar (noVali) {
          axios.post('/mscs/user/updateUserDetails', this.user).then((res) => {
            if (res.data.code === 1) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$store.commit('modifyUser', this.user)
            }
          }).catch((error) => {
            this.$catchError(error)
          })
      },
    }
  }
</script>
<style>
  .ps-container {
    padding-top: 40px;
  }
  .ps-width {
    width: 420px;
  }
  .ps-avatar {
    margin-bottom: 15px;
  }
  .ps-avatar img {
    width: 150px;
    border-radius: 50%;
    background: #E0E0E0;
    margin-bottom: 20px;
  }
  .ps-avatar button{
    display: block;
    margin: 0 auto;
  }
  .ps-confirm {
    margin-top: 20px;
  }
</style>
